<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <link href="../../template/img/page-logo.png" rel="icon" type="image/png" /> 
        <link href="css/task6.css" rel="stylesheet" type="text/css" />
        <title>Task6 of IEF2016 Spring</title>       
    </head>

    <body>
        <header>
            <p class="header" id="top-link"><a href="http://ife.baidu.com">ife.baidu.com</a></p>
            <p class="header" id="date">2016.04</p>
        </header>
        
        <main>
            <section class="top">
                <div id="top-left">
                    <div id="img"><img src="img/top.png" /></div>
                    <div id="before"></div>
                    <div id="after"></div>
                </div>
                <div id="top-right">
                    <p class="head" id="the-top">about<br />technologe</p> 
                    <p id="about">About technologe about technologe about technologe</p>
                    <p id="seven">700</p>
                    <p id="three">3.2</p>
                    <p id="css">css</p>
                    <p id="thr-css">csscsscsscss</p>
                </div>
            </section>
            
            <section class="tri-column">
                <article id="mid-column">
                    <h2>When</h2>                 
                    <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                </article>
                <article id="left-column">
                    <h2>What</h2>                 
                    <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                </article>
                <article id="right-column">
                    <h2>How</h2>                 
                    <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>    
                    <ul id="how">
                        <li class="what">What--------<span>40%</span></li>
                        <li class="what">What--------<span>30%</span></li>
                        <li class="what">What--------<span>30%</span></li>
                    </ul>
                </article>    
            </section>
            
            <section class="bottom">
                <div id="bottom-left">
                    <article>
                        <h2><span>THE</span> THCHNOLOGE OF FRONT</h2>
                        <h3>前端技术领域</h3>
                        <p id="first-pargra">
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前<img src="img/left.png" />端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        </p>
                        <p id="second-pargra">
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        </p>
                         
                        <p id="third-pargra">
                            前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        </p>
                       
                    </article>
                </div>
                <div id="bottom-right">
                    <div id="right-top">
                        <img src="img/right.png" />
                        <div id="rim"></div>
                        <div id="content">    
                                <h2>前端技术</h2>
                                <p>前端技术前端技术</p>
                        </div>
                    </div>
                    <div id="right-bottom">
                        <ul>
                            <li>前端前端前端前端前端前端..............<span>前端</span></li>
                            <li>前端前端前端前端前....................<span>前端</span></li>
                            <li>前端前端前端前端前端..................<span>前端</span></li>
                        </ul>
                        <div id="bottom-s-left">
                            <h2>0</h2>
                            <h3>ONE TWO <br />THREE FORE FIVE</h3>
                            <p>hello world hello world hello world</p>
                        </div>
                        <div id="bottom-s-right">
                            <blockquote><span id="le-quo">"</span> world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello<span id="re-quo">"</span></blockquote>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
        <footer>
            <p class="footer" id="bottom-link"><a href="http://ife.baidu.com">ife.baidu.com</a></p>
        </footer>
    </body>
</html>